
import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
import { Modal,Button } from 'antd';
import React, { useState } from 'react';
import {Dealer} from '../../model';
import request from '@/utils/request';
import { message } from 'antd';

export type FormValueType = {
    target?: string;
    template?: string;
    type?: string;
    time?: string;
    frequency?: string;
  } & Partial<Dealer>;

  
export type ChooseProps = {
    onCancel: (flag?: boolean, formVals?: FormValueType) => void;
    onSubmit: (values: Dealer[]) => Promise<void>;
    modalVisible: boolean;
    checkFlag:boolean;
    values: Partial<Dealer>[];
  };

  
const SaleDialog: React.FC<ChooseProps> = (props)=>{

  const [selectedRowsState, setSelectedRows] = useState<any>([]);

    async function listData(params: any) {
      var data =  request('/xwyl/salesTeam/salesTeamData', {
        params,
      });
      return data;
    }

    const rowSelection = {
      onChange: (key:any, selectedRows:any) => {
        setSelectedRows(selectedRows);
      },
      getCheckboxProps: (record:any) => {
        var index = props.values.findIndex((item)=>{
          return item.id === record.id;
        });
        if(index<0){
          return {
            disabled: false,
            name: record.name,
          }
        }else{
          return {
            disabled: true,
            name: record.name,
          }
        }
      }
    };

    const columns: ProColumns<Dealer>[] = [
        {
          title:"销售名称",
          dataIndex: 'name',
        },
        {
          title:"职位",
          dataIndex: 'part',
        },
        {
          title:"销售上级",
          dataIndex: 'pName',
          hideInSearch:true,
        },
        {
          title:"所属团队",
          dataIndex: 'teamName',
          hideInSearch:true,
        },
        // {
        //   title:"操作",
        //   valueType: 'option',
        //   render: (text, record,_, action) => [
        //     <a
        //       key="editable"
        //       onClick={() => {
        //         props.onSubmit([record]);
        //       }}
        //     >
        //       选择
        //     </a>
        //   ],
        // },
      ];

    return (
      <Modal
        title="选择销售"
        width={1000}
        destroyOnClose={true}
        visible={props.modalVisible}
        onOk={()=>{
          var data = selectedRowsState.filter((item:any)=>{       
            return !item.choose;
          });
          var map = {}
          // console.log(  props.values)
          props.values.forEach((item:any)=>{
            if(!map[item.teamId]){
              map[item.teamId] = 1
            }
          })

          console.log(data)
          data.forEach((item:any)=>{
            if(!map[item.teamId]){
              map[item.teamId] = 1
            }
          })
          if(props.checkFlag){
            if(Object.keys(map).length!=data.length+props.values.length){
              message.warning('请选择不同团队的销售')
            }else{
              props.onSubmit(data);
              setSelectedRows([]);
            }
          }else{
            props.onSubmit(data);
            setSelectedRows([]);
          }
          
    
        }}
        onCancel={()=>{
            props.onCancel();
        }}
      >
        <ProTable<Dealer>
          headerTitle='销售列表'
          toolBarRender={false}
          request={async(params, sorter, filter) => listData({ ...params, sorter, filter })}
          columns={columns}
          rowKey="id"
          search={{
              filterType: 'query',
              layout: 'horizontal',
          }}
          pagination={{
            pageSizeOptions:['20', '100', '500']
          }}
           rowSelection={{
              type: "checkbox",
              ...rowSelection,
            }}
          />
      </Modal>
    );
}
export default SaleDialog;